page {
  font-size: 28rpx;
  background-color: #f9f9f8;
}

page {
  --safe-area-inset-top: 0rpx;
  --safe-area-inset-right: 0rpx;
  --safe-area-inset-bottom: 0rpx;
  --safe-area-inset-left: 0rpx;
  --safe-area-inset-bottom-converted: calc(var(--safe-area-inset-bottom) / 2);
  // min-height: 100vh;
  background: #f3f4f7;
}
@supports (top: constant(safe-area-inset-top)) {
  page {
    --safe-area-inset-top: constant(safe-area-inset-top, 0rpx);
    --safe-area-inset-right: constant(safe-area-inset-right, 0rpx);
    --safe-area-inset-bottom: constant(safe-area-inset-bottom, 0rpx);
    --safe-area-inset-left: constant(safe-area-inset-left, 0rpx);
  }
}

@supports (top: env(safe-area-inset-top)) {
  page {
    --safe-area-inset-top: env(safe-area-inset-top, 0rpx);
    --safe-area-inset-right: env(safe-area-inset-right, 0rpx);
    --safe-area-inset-bottom: env(safe-area-inset-bottom, 0rpx);
    --safe-area-inset-left: env(safe-area-inset-left, 0rpx);
  }
}

/* 用法:<view class="det-foot" style="border-bottom: var(--safe-area-inset-bottom) solid #FFFFFF;">
  或者:.det-foot { height: calc(50px + var(--safe-area-inset-bottom)); } 
	.detail { padding-bottom: calc(60px + var(--safe-area-inset-bottom)); }*/
.safearea-2bb {
  border-bottom: var(--safe-area-inset-bottom) solid transparent;
}
.safearea-bb {
  border-bottom: var(--safe-area-inset-bottom-converted) solid transparent;
}
// .safearea-bt {
//   border-top: var(--safe-area-inset-bottom-converted) solid transparent;
// }
.safearea-bb-white {
  border-bottom: var(--safe-area-inset-bottom-converted) solid #ffffff;
}
.safearea-bb-default {
  border-bottom: var(--safe-area-inset-bottom-converted) solid #f6f7f8;
}
// .safearea-bb-theme {
//   border-bottom: var(--safe-area-inset-bottom-converted) solid $primary;
// }
.safearea-bt {
  border-top: var(--safe-area-inset-top) solid transparent;
}
.safearea-bt-white {
  border-top: var(--safe-area-inset-top) solid #ffffff;
}
.safearea-bt-white {
  border-top: var(--safe-area-inset-top) solid #ffffff;
}
//   .safearea-bt-theme {
// 	border-top: var(--safe-area-inset-top) solid $primary;
//   }

.view-content {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
